<template>
	<el-drawer title="任务详情" v-model="visible" size="60%" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main>
				<el-form>
					<el-form-item label="任务标题" prop="taskName">{{ form.taskName }}</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="任务类型" prop="taskType">{{ form.taskTypeName }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="任务级别" prop="level">
								<el-tag v-if="form.level==0" type="warning">普通</el-tag>
								<el-tag v-else-if="form.level==1" type="success">重要</el-tag>
								<el-tag v-else-if="form.level==2" type="danger">重点</el-tag>
								<el-tag v-else type="info">未知</el-tag>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="开始时间" prop="beginTime">{{ form.beginTime }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="结束时间" prop="endTime">{{ form.endTime }}</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="任务负责人" prop="chargeAccountId">{{ form.userName }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="任务监督人" prop="supervisorAccountId">{{ form.supervisorUserName }}</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="任务参与人">{{ form.participantUserName }}</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="所需工期" prop="duration">{{ form.duration }}/天
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="任务摘要">
						<div v-html="form.content"></div>
					</el-form-item>
					<el-form-item label="相关附件" v-if="form.attachId!=''">
						<attach-menu :attachIds="form.attachId" :roleFlag="form.attachRole" :preview="true"></attach-menu>
					</el-form-item>
					<GanttComponent class="left-container" :readOnly="true" :tasks="tasks"></GanttComponent>
				</el-form>
				<el-divider content-position="center">处理日志</el-divider>
				<el-table :data="taskProcessList" style="width: 100%" class="customer-table">
					<el-table-column prop="content" label="处理结果" :show-overflow-tooltip="true" width="300"></el-table-column>
					<el-table-column prop="pProgress" label="当前进度" width="100">
						<template #default="scope">
							<el-progress :percentage="scope.row.pProgress*100"></el-progress>
						</template>
					</el-table-column>
					<el-table-column prop="completeTime" label="完成时间" width="100" align="center"></el-table-column>
					<el-table-column prop="attachId" label="相关附件">
						<template #default="scope">
							<attach-menu :attachIds="scope.row.attachId" :roleFlag="1" :preview="true"></attach-menu>
						</template>
					</el-table-column>
					<el-table-column label="操件" fixed="right" align="right" width="100">
						<template #default="scope">
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)" v-if="scope.row.isMe=='1'">
								<template #reference>
									<el-button text type="primary" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<el-footer style="text-align: center;">
					<el-button @click="visible=false">关闭</el-button>
				</el-footer>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
import GanttComponent from '@/views/office/task/gantt/ganttView';
import AttachMenu from '@/views/module/attachMenu'

export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu, GanttComponent
	},
	data() {
		return {
			loading: false,
			taskProcessList: [],
			tasks: {
				data: [],
				links: []
			},
			form: {
				taskId: '',
			},
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open(model) {
			this.model = model;
			this.visible = true;
			return this;
		},
		async getTaskInfo() {
			let res = await this.$API.clue.task.getTaskById.get({taskId: this.form.taskId});
			this.isSaveing = false;
			if (res.code == 200) {
				this.form = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getGanttInfoByTaskId() {
			var res = await this.$API.clue.task.getGanttInfoByTaskId.get({taskId: this.form.taskId});
			if (res.code == 200) {
				this.tasks = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getTaskProcessInfo() {
			var res = await this.$API.clue.task.getTaskProcessInfo.get({taskId: this.form.taskId});
			if (res.code == 200) {
				this.taskProcessList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async table_del(row){
			var res = await this.$API.clue.task.deleteTaskProcess.post({processId:row.processId});
			if (res.code == 200) {
				this.getTaskProcessInfo();
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//表单注入数据
		setData(data) {
			if(data.taskId==undefined)
			{
				this.form.taskId = data.id;
			}else
			{
				this.form.taskId = data.taskId;
			}
			this.getTaskInfo();
			this.getGanttInfoByTaskId();
			this.getTaskProcessInfo();
		},

	}
}
</script>

<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.container {
	height: 100vh;
	width: 100%;
}

.left-container {
	overflow: hidden;
	position: relative;
	height: 200px;
}
</style>
